<template>
    <div>
        <p>
            <button @click="list(1)" class="btn btn-white btn-default btn-round">
                <i class="ace-icon fa   fa-arrow-circle-o-down red2"></i>
                刷新
            </button>
        </p>
        <table id="simple-table" class="table  table-bordered table-hover">
            <thead>
            <tr>
                        <th>相对路径</th>
                        <th>文件名</th>
                        <th>后缀</th>
                        <th>大小</th>
                        <th>用途</th>
                        <th>已上传分片</th>
                        <th>分片大小</th>
                        <th>分片总数</th>
                        <th>文件标识</th>
            </tr>
            </thead>

            <tbody>
            <tr v-for="uploadFile in uploadFiles">
                            <td>{{uploadFile.path}}</td>
                            <td>{{uploadFile.name}}</td>
                            <td>{{uploadFile.suffix}}</td>
                            <td>{{uploadFile.size}}</td>
                            <td>{{uploadFile.use}}</td>
                            <td>{{uploadFile.shardIndex}}</td>
                            <td>{{uploadFile.shardSize}}</td>
                            <td>{{uploadFile.shardTotal}}</td>
                            <td>{{uploadFile.fileKey}}</td>
            </tr>
            </tbody>
        </table>
        <pagination ref="pagination" v-bind:list="list"  v-bind:itemCount="2" style="float: right" ></pagination>
    </div>
</template>
<script>
    import pagination from "../../components/pagination";
    export default {
        name: 'uploadFile',
        components:{pagination},
        mounted() {//在组件内容被渲染到页面之【后】立即执行的函数
            let _this = this;
            $('body').attr('class', 'no-skin');
            //默认分页每页显示5条
            _this.$refs.pagination.size = 5;
            _this.list(1);
        },
        data(){
            return{
                uploadFiles:[],
                uploadFile:{}
            }
        },
        methods:{
            //进行Axios异步通讯
            list(page){
                //加载框显示
                Loading.show();
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER+"/file/uploadFile/getAllUploadFiles",{
                    page:page,
                    size:_this.$refs.pagination.size,
                }).then(function (response) {
                    let responseBody = response.data;//获取到axios响应的结果对象
                    _this.uploadFiles = responseBody.list;//获取查询的结果
                    //渲染分页组件的效果
                    _this.$refs.pagination.render(page, responseBody.total);
                    //加载框显示
                    Loading.hide();
                });
            }
    }
    }
</script>
